<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta content="yes" name="apple-mobile-web-app-capable" />
		<meta content="black" name="apple-mobile-web-app-status-bar-style" />
		<meta content="telephone=no" name="format-detection" />
		<meta content="email=no" name="format-detection" />
		<title>巡检结果-地图模式</title>
		<link rel="stylesheet" href="../../css/s_plus.css" />
		<link rel="stylesheet" href="../../css/base.css" />
		<link rel="stylesheet" href="../../css/hui.css" />

		<link rel="stylesheet" href="../../css/layout.css" />
		<link rel="stylesheet" href="../../css/choice.css" />
		<script type="text/javascript" src="../../libs/vue.js"></script>
		<script type="text/javascript" src="../../js/jquery.1.9.1.min.js"></script>
		<script type="text/javascript" src="../../js/app/url.js"></script>
		<script type="text/javascript" src="../../libs/hui.js"></script>
		<script type="text/javascript" src="../../js/app/api.js"></script>
		<script type="text/javascript" src="../../js/control/pop.js"></script>
		<script type="text/javascript" src="../../js/md5.js"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=a82yNQICnHARgGpKuPH1wWZWQcBD2Llo"></script>
		<style>
			/*隐藏百度地图 底部LOGO*/
			
			.BMap_cpyCtrl {
				display: none;
			}
			
			.anchorBL {
				display: none;
			}
		</style>
	</head>

	<body class="bg_gray">

		<div id="wrapper">
			<header class="f_l maxbox subhead">
				<a class="back" @click="back"><i class="iconfont">&#xe605;</i></a>
				<h1>巡检结果(GIS地图)</h1>
				<a class="f_r arrow_r"><i class="iconfont">&#xe611;</i></a>
				<!--<ul class="head_nav">
   <li><a @click="gisMap">地图模式</a></li>
    <li><a @click="ins_list">列表模式</a></li>
  </ul>-->
			</header>
			<section class="f_l maxbox map">
				<!--<div class="f_l searchbar">
      <input class="search_key" name="" type="text" placeholder="请输入关键字">
      <button class="search_btn" name=""><i class="iconfont">&#xe63e;</i></button>
    </div>-->
				<!--<img src="../../images/map.jpg">-->
				<div id="allmap" style="width: 100%;height:300px"></div>

			</section>
			<section class="f_l maxbox work_list" style="display: none;">
				<!--<dl>
      <a href="">
        <dt>
          <b>终端NG2464</b>
        </dt>
        <dd class="txt_list">
          <p><em>巡检组：</em>巡检组二</p>
          <p><em>巡检人员：</em>张三</p>
          <p><em>区域：</em>长沙市雨花区检区</p>
          <p><em>时间：</em>2018/9/4 15:00 - 2018/9/4 16:00</p>
          <p><em>公司：</em>长沙电信</p>
          <p><em>备注：</em>巡检组二dsf</p>
        </dd>
      </a>
    </dl>-->
				<dl>
					<a @click="go(zhongduan)">
						<dt>
              <i class="iconfont bg_red">&#xe60f;</i>
              <b>{{zhongduan.checkStatus}}</b>
            </dt>
						<dd class="txt_list">

							<!--<p><em>巡检状态：</em>{{zhongduan.checkStatus}}</p>-->
							<p><em>设备类型：</em>{{zhongduan.gjType}}</p>
							<p><em>设备编号：</em>{{zhongduan.termimalCode}}</p>
							<p><em>设备地址：</em>{{zhongduan.belongStreet}}</p>
						</dd>
					</a>
				</dl>

			</section>
		</div>
		<script>
			//屏幕高度减去 头部和底部DIV高度 设置地图控件高度
			var head = $(".subhead").height();
			var foot = $(".work_list").height();
			var pageHeight = $(document).height();
			var mapHeight = pageHeight - (head);
			$("#allmap").height(mapHeight);

			console.log("head-" + head + "  foot--" + foot + "  pageHeight-" + pageHeight);

			var sp = new Vue({
				el: "#wrapper",
				data: {
					zhongduan: {},
					lists: []
				},

				methods: {
					go: function(param) {
						//							param.termimalCode
						param.checkStatus;

						if(param.checkStatus == '未打卡') {
							localStorage.setItem("zdCode", "");
							hui.open("track_task.html?time=" + apiManage.getNow(), {}, true, {});
						} else {
							localStorage.setItem("type", "normal");
							hui.open("track_task_show.html?time" + apiManage.getNow(), {}, true, {});

						}

					},
					back: function() {
						hui.open("inspection.html", {}, true, {});

					},
					showStatus: function(status) {

						if(status == '0') {
							return "无告警	";
						} else if(status == '1') {
							return "一般告警";
						} else if(status == '2') {
							return "严重告警";
						} else {
							return "工单处理";

						}
					},

					geshi: function(param) {
						return formatTime(param);
					},
					showType: function(param) {
						//							0：日巡检 1：周巡检 2：月巡检
						if(param == '0') {
							return "日巡检";
						} else if(param == '1') {
							return "周巡检 ";
						} else {
							return "月巡检";

						}
					},
					showState: function(param) {
						//								0下发 1接收 2处理
						if(param == '0') {
							return "下发";
						} else if(param == '1') {
							return "接收";
						} else {
							return "处理";

						}
					},

					show: function(zdCode) {
						localStorage.setItem("zdCode", zdCode);
						hui.open("alerm_show.html?time" + apiManage.getNow(), {}, true, {});
					},

					gisMap: function() {
						hui.open("inspection_map.html", {}, true, {});
					},
					ins_list: function() {
						hui.open("inspection_list.html", {}, true, {});
					}

				}

			});

			// 百度地图API功能
			var map = new BMap.Map("allmap");
			var point = new BMap.Point(112.9453203518, 28.2340227593);
			map.centerAndZoom(point, 12);
			map.enableScrollWheelZoom(false);

			var geolocation = new BMap.Geolocation();
			geolocation.getCurrentPosition(function(r) {
				//				console.log(r.point)
				if(this.getStatus() == BMAP_STATUS_SUCCESS) {

					//			var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(300,157));
					var myIcon = new BMap.Icon("../../images/danger01.png", new BMap.Size(300, 157));
					var mk = new BMap.Marker(r.point, {
						icon: myIcon
					});
					mk.addEventListener("click", attribute);

					function attribute() {
						var p = mk.getPosition(); //获取marker的位置
						alert("marker的位置是" + p.lng + "," + p.lat);

					}

					//					map.addOverlay(mk); //标出所在地
					//					map.panTo(r.point); //地图中心移动

					var point = new BMap.Point(r.point.lng, r.point.lat); //用所定位的经纬度查找所在地省市街道等信息
					var gc = new BMap.Geocoder();
					gc.getLocation(point, function(rs) {
						var addComp = rs.addressComponents;

						//						console.log(rs.address); //地址信息
						//alert(rs.address);//弹出所在地址

					});
				} else {
					alert('定位失败，请检查您的手机定位功能是否打开' + this.getStatus());
				}
			}, {
				enableHighAccuracy: true
			})

			//头部点击显示与隐藏
			$(".arrow_r").on("click", (function() {
				//		$(".head_nav").toggle();
				//			localStorage.setItem("zdList",null);
				localStorage.setItem("type", "normal");

				hui.open("track_task_show.html?time" + apiManage.getNow(), {}, true, {});
			}));

			function settingMarker() {

				if(sp.lists != null && sp.lists.length > 0) {
					for(var i = 0; i < sp.lists.length; i++) {
						var object = sp.lists[i];
						if(i == sp.lists.length - 1) {
							object.over = true;
						}
						addMarker(object);

					}
				}

			}

			loadZDList();

			function loadZDList() {
				hui.loading("");

				var taskId = localStorage.getItem("taskId");
				//			
				var username = localStorage.getItem("username");
				var sec = localStorage.getItem("sec_pwd");
				var time = apiManage.getNow();
				var key = "loginName=" + username + "&passWord=" + sec + "&time=" + time;
				var paramKey = hex_md5(key);
				var jsonParam = JSON.stringify({
					loginName: username,
					time: time,
					key: paramKey
				});

				console.log("jsonParam:  " + jsonParam);

				var path = urlManager.inspection_detail() + "?taskId=" + taskId;
				console.log("path:  " + path);
				$.ajax({
					type: "GET",
					url: path,
					beforeSend: function(request) {
						request.setRequestHeader("loginName", username);
						request.setRequestHeader("time", time);
						request.setRequestHeader("sign", paramKey);
						request.setRequestHeader("Content-Type", "application/text");

					},
					success: function(result) {
						console.log("任务详情:" + JSON.stringify(result));
						hui.closeLoading();
						//			    $(".work_list").show();
						if(result != null) {
							//									sp.task = result.checkTask;
							sp.lists = result.resTerminals;
							settingMarker();
						}

					}

				});

			}

			//终端详情
			function loadDetail(zdCode, checkStatus) {
				//				alert(zdCode);
				//var pid = cell.zdID;
				var username = localStorage.getItem("username");
				var sec = localStorage.getItem("sec_pwd");
				var time = apiManage.getNow();
				var key = "loginName=" + username + "&passWord=" + sec + "&time=" + time;
				var paramKey = hex_md5(key);
				var jsonParam = JSON.stringify({
					loginName: username,
					time: time,
					key: paramKey
				});

				console.log("jsonParam:  " + jsonParam);

				var path = urlManager.terminalDetail() + "?terminalCode=" + zdCode;
				console.log("path:  " + path);
				$.ajax({
					type: "GET",
					url: path,
					beforeSend: function(request) {
						request.setRequestHeader("loginName", username);
						request.setRequestHeader("time", time);
						request.setRequestHeader("sign", paramKey);
						request.setRequestHeader("Content-Type", "application/text");

					},
					success: function(result) {
						console.log("终端详情:" + JSON.stringify(result));
						hui.closeLoading();
						//			    $(".work_list").show();
						sp.zhongduan = result;
						sp.zhongduan.checkStatus = checkStatus;

						$(".work_list").show();
						$("#allmap").height(mapHeight - foot);

					}

				});

			}

			//标记
			function addMarker(cell) {
				//					 "code":"HNTL-430102-HNCS-001",
				//                  "latitude":"28.191899",
				//                  "id":"1",
				//                  "statu":"0",
				//                  "longitude":"113.036656"

				var point = new BMap.Point(cell.longitude, cell.latitude);

				//					0异常 1正常2未打卡
				var iconUrl = "";
				if(cell.checkStatus == '2') {
					iconUrl = "../../images/danger01.png";
				} else if(cell.checkStatus == '1') {
					iconUrl = "../../images/danger04.png";

				} else {
					iconUrl = "../../images/danger02.png";

				}
				var myIcon = new BMap.Icon(iconUrl, new BMap.Size(300, 157));
				var mk = new BMap.Marker(point, {
					icon: myIcon
				});
				//					var label = new BMap.Label("我是文字标注哦",{offset:new BMap.Size(20,-10)});
				//					mk.setLabel(label);

				mk.addEventListener("click", attribute);
				map.addOverlay(mk); //标出所在地

				if(cell.over) {

					map.panTo(point); //地图中心移动
				}

				function attribute() {
					//						alert('终端ID:'+cell.zdID);
					var p = mk.getPosition(); //获取marker的位置
					//							sp.zd.title=cell.code;
					//							sp.zd.statu=cell.statu;
					var checkStatus = "";
					//0异常 1正常2未打卡
					if(cell.checkStatus == '0') {
						checkStatus = "异常";
					} else if(cell.checkStatus == '1') {
						checkStatus = "正常";
					} else {
						checkStatus = "未打卡";

					}
					loadDetail(cell.termimalCode, checkStatus);
					console.log("checkStatus--" + cell.checkStatus);

				}

			}

			Date.prototype.format = function(format) //author: meizz
			{
				var o = {
					"M+": this.getMonth() + 1, //month
					"d+": this.getDate(), //day
					"h+": this.getHours(), //hour
					"m+": this.getMinutes(), //minute
					"s+": this.getSeconds(), //second
					"q+": Math.floor((this.getMonth() + 3) / 3), //quarter
					"S": this.getMilliseconds() //millisecond
				}
				if(/(y+)/.test(format)) format = format.replace(RegExp.$1,
					(this.getFullYear() + "").substr(4 - RegExp.$1.length));
				for(var k in o)
					if(new RegExp("(" + k + ")").test(format))
						format = format.replace(RegExp.$1,
							RegExp.$1.length == 1 ? o[k] :
							("00" + o[k]).substr(("" + o[k]).length));
				return format;
			}

			function formatTime(val) {
				if(val == null || val == '') {
					return "";
				}
				var re = /-?\d+/;
				var m = re.exec(val);
				//	         m = m.replace(/\-/g, "/");
				var d = new Date(parseInt(m[0]));

				// 按【2012-02-13 09:09:09】的格式返回日期
				//	        var tmp  = d.format("yyyy-MM-dd hh:mm:ss");
				//	        console.log("格式化时间:   "+tmp);
				return d.format("yyyy-MM-dd hh:mm:ss");
			}

			//获取当前时间戳
			function getNow() {
				var timestamp = new Date().getTime();
				return timestamp;
			}
		</script>
	</body>

</html>